<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      body {
          background: #000;
      }

      div {
          box-sizing: border-box;
      }

      .container {
          width: 300px;
          height: 400px;
          /*border: 1px dashed white;*/
          position: absolute;
          left: 50%;
          margin-left: -150px;
          top: 50%;
          margin-top: -200px;
          filter: contrast(15);
          background: #000;
      }

      .number {
          position: absolute;
          font-size: 30px;
          color: white;
          z-index: 100;
          left: 50%;
          margin-left: -20px;
          top: 50%;
          margin-top: -120px;
      }

      .circle {
          width: 200px;
          height: 200px;
          border: 1px dashed white;
          border-radius: 80px 95px 120px 80px / 90px;
          background: #00dd00;
          position: absolute;
          top: 0;
          left: 50%;
          margin-left: -100px;
          transform: rotate(0);
          animation: rotate 10s linear infinite;
          filter: blur(5px);
      }

      .circle:after {
          content: '';
          display: inline-block;
          width: 170px;
          height: 170px;
          background: #000;
          border-radius: 50%;
          position: absolute;
          left: 50%;
          margin-left: -85px;
          top: 15px;
      }

      .box {
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 120px;
          height: 40px;
          background: #00dd00;
          margin-left: -60px;
          border-radius: 60px 60px 0 0;
          filter: blur(5px);
      }

      .dot {
          border-radius: 50%;
          background: #00dd00;
          position: absolute;
      }

      .dot:nth-of-type(1) {
          width: 25px;
          height: 25px;
          left: 40px;
          animation: toTop 8s ease-in-out infinite;
      }

      .dot:nth-of-type(2) {
          width: 20px;
          height: 20px;
          left: 55px;
          animation: toTop 6s ease-in-out infinite;
      }

      .dot:nth-of-type(3) {
          width: 22px;
          height: 22px;
          left: 40px;
          animation: toTop 6.5s ease-in-out infinite;
      }

      .dot:nth-of-type(4) {
          width: 24px;
          height: 24px;
          left: 80px;
          animation: toTop 4s ease-in-out infinite;
      }

      .dot:nth-of-type(5) {
          width: 27px;
          height: 27px;
          left: 30px;
          animation: toTop 7s ease-in-out infinite;
      }

      .dot:nth-of-type(6) {
          width: 26px;
          height: 26px;
          left: 30px;
          animation: toTop 12s ease-in-out infinite;
      }

      .dot:nth-of-type(7) {
          width: 32px;
          height: 32px;
          left: 45px;
          animation: toTop 9s ease-in-out infinite;
      }

      .dot:nth-of-type(8) {
          width: 38px;
          height: 38px;
          left: 50px;
          animation: toTop 8s ease-in-out infinite;
      }

      .dot:nth-of-type(9) {
          width: 38px;
          height: 38px;
          left: 70px;
          animation: toTop 13s ease-in-out infinite;
      }

      @keyframes rotate {
          50% {
              border-radius: 90px / 80px 95px 120px 80px;
          }
          100% {
              transform: rotate(720deg);
          }
      }

      @keyframes toTop {
          90% {
              opacity: 1;
          }
          100% {
              opacity: 0.1;
              transform: translate(0, -180px);
          }
      }
  </style>
</head>
<body>
<div class="app">
  <div class="number">90%</div>
  <div class="container">
    <div class="circle"></div>
    <div class="box">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
</div>
</body>
</html>